<template>
    <div id="AverageLine" :style="{height:height,width:width}" :xAxisData="xAxisData" :seriesData="seriesData"
         :title="title" :seriesName="seriesName" :legendData="legendData">
    </div>
</template>
<script>
    import {on, off} from './tools'

    export default {
        name: 'Bar',
        props: {
            xAxisData: Array,
            seriesData: Array,
            title: String,
            height: {
                type: String,
                default: "254px"
            },
            seriesName: {
                type:String,
                default:""
            },
            legendData: Array
        },
        data() {
            return {
                msg: '',
                chart: null,
                width: "100%",
                option: {
                    color: ["#84bafd",
                        "#6ad9e6",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '',
                            type: 'line',
                            data: [],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                        itemStyle: {
                                            normal: {
                                                show: true,
                                                color: '#6ad9e6'
                                            }
                                        },
                                    }
                                ],

                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.drawLine();
            })
        },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('AverageLine'))
                this.chart = myChart;
                // 绘制图表
                this.option.xAxis[0].data = this.xAxisData;
                this.option.series[0].data = this.seriesData;
                this.option.title.text = this.title;
                this.option.series[0].name = this.seriesName;
                this.option.legend.data = this.legendData;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }

</script>
<style>
    #Bar div {
        width: 100%;
    }
</style>
